<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }

        .container {
            position: relative;
            width: 100%;
            background-color: #ccc;
        }

        .video {
            position: absolute;
            width: 100%;
        }

        .canvas {
            position: absolute;
            width: 100%;
        }

        .buttons {
            padding: 15px;
            text-align: center;
        }

        #btnRun {
            width: 135px;
            height: 45px;
        }
    </style>
</head>

<body>
    <div class="buttons">
        <button onclick="run();" disabled id="btnRun">Start a Camera</button>
    </div>
    <div class="container">
        <video onloadedmetadata="onPlay(this)" id="inputVideo" autoplay muted playsinline class="video"></video>
        <canvas id="overlay" class="canvas"></canvas>
    </div>
    <script src="js/face-api.js"></script>
    <script>
        // tiny_face_detector options
        let inputSize = 288;
        let scoreThreshold = 0.5;

        function getFaceDetectorOptions() {
            return new faceapi.TinyFaceDetectorOptions({ inputSize, scoreThreshold });
        }

        function getCurrentFaceDetectionNet() {
            return faceapi.nets.tinyFaceDetector
        }

        const inputVideo = document.querySelector('#inputVideo');
        const canvas = document.querySelector('#overlay');
        const options = getFaceDetectorOptions();

        async function onPlay() {
            if (inputVideo.paused || inputVideo.ended) {
                return setTimeout(() => onPlay());
            }
            const options = getFaceDetectorOptions();
            await detect();
            setTimeout(() => onPlay())
        }

        async function run() {
            // try to access users webcam and stream the images
            // to the video element
            const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
            inputVideo.srcObject = stream;

            onPlay();
        }

        async function load() {
            console.time("load-face-detector-model");
            await faceapi.loadTinyFaceDetectorModel('models/');
            console.timeEnd("load-face-detector-model");

            console.time("load-face-landmark-tiny-model");
            await faceapi.loadFaceLandmarkTinyModel('models/');
            console.timeEnd("load-face-landmark-tiny-model");

            document.querySelector('#btnRun').removeAttribute('disabled');
        }

        async function detect() {
            console.time("detectAllFaces");
            const results = await faceapi.detectAllFaces(inputVideo, options).withFaceLandmarks(true)
            console.timeEnd("detectAllFaces");

            const dims = faceapi.matchDimensions(canvas, inputVideo, true);
            const resizedResults = faceapi.resizeResults(results, dims);
            faceapi.draw.drawDetections(canvas, resizedResults);
            faceapi.draw.drawFaceLandmarks(canvas, resizedResults);

        }

        load();

    </script>
</body>

</html>